<template>
  <div class="address">
    <top-header :isLeft="true" title="地址管理"></top-header>
    
    <div class="no-address" v-if="commonAddress.length==0">
      <img src="../assets/imgs/地址.png" alt="" />
      <div class="no-address-tips">
        <b>没有地址</b>
      </div>
      <p>你还没有常用地址 快去添加一个</p>
    </div>

    <div class="common-address" v-else>
      <ul>
        <li v-for="(item, index) in commonAddress" :key="index">
          <p>
          <a-tag color="cyan">
            {{labelMap[item.label]}}
          </a-tag>
          {{item.address_location}}{{item.address_doorplate}}
          </p>
          <p>
            {{item.user_name}}{{item.user_phone}}
          </p>
        </li>
      </ul>
    </div>


    <div class="btn">
      <a-button type="primary" block shape="round" @click="addAddress()">
      <a-icon type="plus" />新建地址
    </a-button>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  name: "Address",
  data() {
    return {
      tempAddress: {
        user_name: "",
        user_phone: "",
        address_location: "",
        address_doorplate: "",
        label: "1",
      },
      labelMap: {},
    };
  },
  computed: {
    commonAddress(){
      return this.$store.getters.commonAddress;
    }
  },
  components: {
    TopHeader,
  },
  methods: {
    addAddress() {
      //把临时数据保存到vuex中
      this.$store.dispatch("setTempAddress",this.tempAddress);
      //页面跳转到新增地址
      this.$router.push({name:"AddAddress"});
    },
  },
  mounted() {
    const self=this;
    this.$http.get("/api/labelMap").then(
      res=>{
        self.labelMap=res.data.data.data;
      },
      err=>{

      })
  },
};
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  height: 100%;
  .no-address {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .no-address-tips {
      display: flex;
      justify-content: center;
      font-size: 1.5rem;
      margin: $common-margin;
    }
  }
  .common-address {
    margin-top: $common-margin;
    padding: $common-padding;
    height: 70%;
    background-color: $module-color;
    ul {
      li {
        border-bottom: 1px solid #ccc;
        padding-top: $common-padding;
      }
      li:last-child{
          border-bottom: none;
        }
    }
  }
  .btn {
    padding: $common-padding;
  }
}
</style>
